<template>
  <div class="table-tools" v-if="tableTools">
    <div class="add">
      <Button v-if="tableTools.add" type="primary" @click="handleClickAdd">{{tableTools.add.text}}</Button>
    </div>
    <div class="search">
      <Input v-if="tableTools.search" v-model="search" search @on-search="handleSearch"/>
    </div>
  </div>
</template>
<script>
export default {
  name: 'table-tools',
  props: {
    tableTools: {
      type: Object
    }
  },
  data () {
    return {
      search: ''
    }
  },
  methods: {
    handleClickAdd () {
      this.$emit('on-add')
    },
    handleSearch () {
      this.$emit('on-search', this.search)
    }
  }
}
</script>
<style scoped>
.table-tools {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
</style>

